<!-- TotalPoints -->
<template>
  <div>
    <el-card class="box-card box-cardCustomer">
      <div slot="header"
           class="clearfix"
           @click="changeArrow">
        <img class="firstIcon"
             src="@/assets/ticket/totalPoint.png">
        <span>{{ $t('custom.nextTicket.totalPoints') }}:
        <el-tooltip :open-delay="1000" class="item" effect="dark" placement="top" v-if="$route.path!=='/nextTicket'">
          <div slot="content">Review, change the Priority Points rules by click <span style="color:#409eff;cursor: pointer;" @click.stop="desSetingPage">Settings</span></div>
          <i class="el-icon-question"></i>
        </el-tooltip>
        </span>
        <span>
          <span class="titlenumber">{{ nextTicketInfoCopy?nextTicketInfoCopy.point?nextTicketInfoCopy.point:0:0 }} </span>
          <i :class="arrowCustomer"></i>
        </span>
      </div>
      <el-collapse-transition>
        <div v-show="showPanel"
             class="box-cardCustomer-content">
          <el-table :data="comDataList"
                    style="width: 100%;">
                    <!-- max-width:97%;max-height:700px;overflow:auto; -->
            <el-table-column prop="property"
                             width="180"
                             label="Items">
            </el-table-column>
            <el-table-column label="Value" min-width="180">
              <template slot-scope="scope">
                <div v-html="scope.row.value"></div>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="value"
                             label="Value">
            </el-table-column> -->
            <el-table-column prop="score"
                             width="80"
                             align="right"
                             label="Points">
            </el-table-column>
          </el-table>
        </div>
      </el-collapse-transition>
    </el-card>
    </div>
</template>
<script>
import { GlobalTimeformat, getNextAppInfo, GlobalDateformat } from '@/utils/common'
export default {
  props: {
    nextTicketInfo: {
      type: Object,
      default: function () {
        return {}
      }
    },
    nextTicketType: {
      type: String,
      default: null
    },
    gadgetSetting: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  components: {

  },
  data () {
    return {
      arrowCustomer: 'el-collapse-item__arrow el-icon-arrow-right is-active  el-icon-arrowCustomer',
      showPanel: true,
      activePannel: ['pannel'],
      cwDate: ['Past Due Date', 'Ticket Status Duration at Service Board', 'Time of Last Update', 'SLA', 'End Time', 'Start Time'],
      autoTaskDate: ['Past Due Date', 'Ticket Status create duration', 'Time of Last Update','Ticket Age'],
      dateKeyList: ['Ticket Age'],
      nextTicketInfoCopy: {},
    }
  },
  computed: {
    comDataList () {
      var pointList = []
      var tempList = []
      tempList = this._.cloneDeep(this.nextTicketInfoCopy ? this.nextTicketInfoCopy.detail ? this.nextTicketInfoCopy.detail : [] : [])
      for (let index = 0; index < tempList.length; index++) {
        // var keyList = []
        const element = tempList[index]
        // keyList = Object.getOwnPropertyNames(element.value)
        // var value = ''
        // for (let index = 0; index < keyList.length; index++) {
        //   const item = keyList[index]
        //   if (index > 0) {
        //     value += element.value[item]
        //   } else {
        //     value += element.value[item] + '<br>'
        //   }
        // }
        let value = ''
        if (this.nextTicketType.replace('dataset','')  === 'nextTicket') {
          if (this.cwDate.includes(element.property)) value = this.formatDateTime(element.data)
          else value = element.data
          if (element.property === this.cwDate[2]) value = this.formatDateTime(element.data, 'hh:ss:mm')
        } else if (this.nextTicketType.replace('dataset','')  === 'autotask') {
          if (this.autoTaskDate.includes(element.property)) value = this.formatDateTime(element.data)
          else value = element.data
          if (element.property === this.autoTaskDate[2]) value = this.formatDateTime(element.data, 'HH:mm:ss')
        } else if (this.nextTicketType.replace('dataset','')  === 'syncro') {
          // todo
          if (element.name && element.name === 'SYNCRO_UPDATE_TIME_GRADE_RULE') {
            value = element.value['Last Updated']
          }
        }else {
          if (this.dateKeyList.includes(element.property)) value = this.formatDateTime(element.data)
          else value = element.data
        }
        if (element.name && element.name === 'STATUS_DURATION_RULE') {
          value = element.value['Status Name'] ? `In ${element.value['Status Name']} Since ${value}` : value
        }
        if (element.data && typeof element.data === 'object') {
          value = ''
          let keylist = Object.keys(element.data)
          keylist.forEach(ele => {
            if (this.cwDate.includes(ele)) value += `${ele}&nbsp;:&nbsp;&nbsp;${this.formatDateTime(element.data[ele], 'HH:mm:ss')}<br/>`
            else value += `${ele}&nbsp;:&nbsp;&nbsp;${element.data[ele]}<br/>`
          })
        }
        pointList.push({
          property: element.property,
          score: element.score,
          value: value,
          name: element.name
        })
      }
      pointList = this._.reject(pointList, { score: 0 })
      if (!tempList) {
        pointList = [{
          property: '',
          score: '',
          value: '',
          name: '' }]
      }
      const isShow = this.$store.state.user.roleList.some(i => i.name === 'Admin')
      if (!isShow) {
        pointList = pointList.filter(i => i.property !== 'MRR')
      }
      return this._.uniq(pointList)
    }
  },
  created () {

  },
  methods: {
    desSetingPage () {
      // this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== this.$store.state.contentTabsActiveName)

      // if (this.nextTicketType.replace('dataset','')  === 'autotask') {
      //   this.$router.replace({
      //     path: '/NextTicketForAutotaskPriorityRules'
      //   })
      // } else if (this.nextTicketType.replace('dataset','')  === 'nextTicket') {
      //   this.$router.replace({
      //     path: '/NextTicketForConnectWisePriorityRules'
      //   })
      // } else if (this.nextTicketType.replace('dataset','')  === 'syncro') {
      //   this.$router.replace({
      //     path: '/NextTicketForSyncroPriorityRules'
      //   })
      // } else if (this.nextTicketType.replace('dataset','')  === 'kaseyabms') {
      //   this.$router.replace({
      //     path: '/NextTicketForKaseyaBMSPriorityRules'
      //   })
      // }
      this.$router.push({
        path: `/NextTicketPriorityRules-${this.nextTicketType.replace('dataset','')}?name=NextTicket For ${getNextAppInfo('resourceId', 'nextTicketName')} Priority Rules`
      })
    },
    changeArrow () {
      this.arrowCustomer = this.arrowCustomer === 'el-collapse-item__arrow el-icon-arrow-right el-icon-arrowCustomer'
        ? 'el-collapse-item__arrow el-icon-arrow-right is-active  el-icon-arrowCustomer'
        : 'el-collapse-item__arrow el-icon-arrow-right el-icon-arrowCustomer'
      this.showPanel = !this.showPanel
    },
    formatDateTime (value) {
      return GlobalTimeformat(value, 'HH:mm:ss', 'YYYY/MM/DD')
    },
    formatDate (value) {
      return GlobalDateformat(value, 'HH:mm:ss')
    },
  },
  watch: {
    nextTicketInfo: {
      handler (val) {
        this.nextTicketInfoCopy = JSON.parse(JSON.stringify(val))
        this.nextTicketInfoCopy.detail.forEach(item=>{
          let field = null
          for(var key in item.value) {
            if(item.data === item.value[key]) {
              field = key
            }
          }
          if(field) {
            let res = this.gadgetSetting.customRuleKeyArray.find(v => v.value.replace('.', '_') === field)
            if (res && (res.type === 'datetime')) {
              item.data = this.formatDateTime(item.data)
            }
            if (res && (res.type === 'date')) {
              item.data = this.formatDate(item[key])
            }
          }
        })
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style scoped >
.box-cardCustomer >>> .el-card__body {
  padding: 0px !important;
}
.box-cardCustomer >>> .el-card__header {
  cursor: pointer;
  height: 59px;
  padding: 18px 10px;
}
.firstIcon {
  height: 20px;
  width: 20px;
  margin-top: -4px;
}
.clearfix > span:nth-child(2) {
  margin-left: 10px;
  height: 22px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  line-height: 22px;
}
.clearfix > span:nth-child(3) {
  margin-top: -5px;
  float: right;
}
.titlenumber {
  font-size: 24px;
  margin-right: 10px;
  margin-top: -5px;
  font-weight: 600;
  color: #138dc7;
  line-height: 34px;
}
.box-cardCustomer-content {
  padding: 20px;
  padding-left: 40px;
}
.clearfix {
  vertical-align: middle;
  text-align: left;
}
.el-icon-arrowCustomer {
  float: right;
  margin-top: 5px;
  padding: 3px 0;
}
</style>
<style lang="scss" scoped>
.total-point-content {
  width: 100%;
  @import "./components.scss";
}
</style>
